import styled from "@emotion/styled"

const TabContainer = styled.div`
    display: flex;
    background-color: #ffffff66;
    border-radius: 4rem;
    padding: 2rem;
    position: relative;
    z-index: 1;
    width: 183rem;
    height: 28rem;
`

const TabButton = styled.button<{ isActive: boolean }>`
    font-family: Gilroy;
    padding: 2rem 8rem;
    border-radius: 4rem;
    border: none;
    background-color: ${(props) => (props.isActive ? "#FAFAFA" : "transparent")};
    color: ${(props) => (props.isActive ? "#FF1F57" : "#131416")};
    font-size: 14rem;
    cursor: pointer;
    font-weight: ${(props) => (props.isActive ? 700 : 400)};
    vertical-align: middle;
`

const PointsHeader: React.FC = () => {
    return (
        <TabContainer>
            <TabButton isActive={true}>Earn Points</TabButton>
            <TabButton isActive={false}>Points Mall</TabButton>
        </TabContainer>
    )
}

export default PointsHeader
